<template>
    <!-- 设备管理-数据分析 -->
    <div class="mainContent">
        <ul class="box">
            <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>设备类型</span>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div
                            id="machTypeStat"
                            :style="{ height: '100%' }"></div>
                        <div class="number">{{ this.machTypeCount }}</div>
                        <div class="name">总设备（台）</div>
                    </div>
                    <div
                        class="right moreRight"
                        id="slide"
                        :style="{ height: machTypeStat.length > 5 ? '2rem' : '1.3rem' }">
                        <vue-seamless-scroll
                            class="warp"
                            style="width: 100%; height: 100%; overflow: hidden"
                            ref="seamlessScroll"
                            :data="machTypeStat"
                            :class-option="classOption">
                            <ul class="list">
                                <li
                                    v-for="(item, index) in machTypeStat"
                                    :key="index">
                                    <span
                                        class="radius"
                                        :style="{ background: colors[index] }"></span>
                                    <span class="name">
                                        <Tooltip
                                            transfer
                                            :content="item.name"
                                            placement="top-start"
                                            max-width="200">
                                            <div
                                                class="p"
                                                style="width: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer">
                                                {{ item.name }}
                                            </div>
                                        </Tooltip>
                                    </span>
                                    <span
                                        class="sub"
                                        v-if="machTypeCount > 0"
                                        >{{ item.value + "台" }}</span
                                    >
                                    <span
                                        class="sub"
                                        v-if="machTypeCount > 0"
                                        >{{ ((item.value / machTypeCount) * 100).toFixed(2) + "%" }}</span
                                    >
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </li>
            <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>持有单位</span>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div
                            id="machCorpStat"
                            :style="{ height: '100%' }"></div>
                        <div class="number">{{ this.machCorpStatCount }}</div>
                        <div class="name">总设备（台）</div>
                    </div>
                    <div
                        class="right moreRight"
                        :style="{ height: machTypeStat.length > 5 ? '2rem' : '1.3rem' }">
                        <vue-seamless-scroll
                            class="warp"
                            style="width: 100%; height: 100%; overflow: hidden"
                            :data="machCorpStat"
                            :class-option="classOption">
                            <ul class="list">
                                <li
                                    v-for="(item, index) in machCorpStat"
                                    :key="index">
                                    <span
                                        class="radius"
                                        :style="{ background: colors[index] }"></span>
                                    <span class="name">
                                        <Tooltip
                                            transfer
                                            :content="item.subName"
                                            placement="top-start"
                                            max-width="200">
                                            <div
                                                class="p"
                                                style="width: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer">
                                                {{ item.subName }}
                                            </div>
                                        </Tooltip>
                                    </span>
                                    <span
                                        class="sub"
                                        v-if="machCorpStatCount > 0"
                                        >{{ item.value + "台" }}</span
                                    >
                                    <span
                                        class="sub"
                                        v-if="machCorpStatCount > 0"
                                        >{{ ((item.value / machCorpStatCount) * 100).toFixed(2) + "%" }}</span
                                    >
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </li>
            <!-- <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>工作状态</span>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div
                            id="machWorkStateStat"
                            :style="{ height: '100%' }"></div>
                        <div class="number">{{ this.bindNum }}</div>
                        <div class="name">入网设备（台）</div>
                    </div>
                    <div
                        class="right"
                        style="height: 1.3rem">
                        <ul
                            class="list"
                            style="height: 1.3rem">
                            <li
                                v-for="(item, index) in machWorkStateStat"
                                :key="index">
                                <span
                                    class="radius"
                                    :style="{ background: colors[index] }"></span>
                                <span class="name">{{ item.name }}</span>
                                <span class="sub">{{ item.value + "台" }}</span>
                                <span class="sub">{{ item.value > 0 ? ((item.value / machWorkStateStatCount) * 100).toFixed(2) + "%" : "0%" }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </li> -->
            <!-- <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>日均工作时长</span>
                </div>
                <div class="chartBox">
                    <div id="workTimes"></div>
                </div>
            </li> -->
            <!-- <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>设备指数</span>
                </div>
                <div class="chartBox">
                    <div id="radarMapDTO"></div>
                </div>
            </li> -->
            <!-- <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>日均油耗量</span>
                </div>
                <div class="chartBox">
                    <div id="oilWear"></div>
                </div>
            </li> -->
            <!-- <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>日均开工率</span>
                </div>
                <div class="chartBox">
                    <div id="operatingRate"></div>
                </div>
            </li> -->
            <!-- <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>日工作设备</span>
                </div>
                <div class="chartBox">
                    <div id="workMachNum"></div>
                </div>
            </li> -->
            <!-- <li class="item">
                <div class="top">
                    <img src="../../assets/svg/t1.svg" />
                    <span>平均效率</span>
                </div>
                <div class="chartBox">
                    <div id="efficExp"></div>
                </div>
            </li> -->
        </ul>
    </div>
</template>
<script>
import { getMachInfoData_V1, getMachRunData_V1 } from "@/api/mach.js"
import { bubbleSort } from "@/sever/utils"
import vueSeamlessScroll from "vue-seamless-scroll"
export default {
    components: {
        vueSeamlessScroll,
    },
    data() {
        return {
            classOption: {
                step: 0.5,
            },
            maxcnt: [], //雷达图最大值
            deptId: "",
            colors: [
                "#5D90FF ",
                "#FCC23B ",
                "#C7D3F5 ",
                "#856DFE ",
                "#FFC880 ",
                "#29b6f6 ",
                "#8bc34a",
                "#A9B0BB",
                "#b3e5fc",
                "#ef5350",
                "#4dd0e1",
                "#304ffe",
                "#ff4081",
                "#82b1ff",
                "#6a1b9a",
                "#f57f17",
                "#b71c1c",
                "#a5d6a7",
                "#ffab91",
                "#880e4f",
                "#f8bbd0",
            ],
            machTypeCount: 0,
            machCorpStatCount: 0,
            machWorkStateStatCount: 0,
            operatingRateCount: 0,
            workMachNumCount: 0,
            efficExpCount: 0,
            bindNum: 0,
            machTypeStat: [],
            machCorpStat: [],
            machWorkStateStat: [],
            dateArr: [],
            workTimes: [],
            oilWear: [],
            operatingRate: [],
            workMachNum: [],
            efficExp: [],
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId
                this.machTypeCount = 0
                this.machCorpStatCount = 0
                this.machWorkStateStatCount = 0
                this.operatingRateCount = 0
                this.workMachNumCount = 0
                this.efficExpCount = 0
                this.bindNum = 0
                this.machTypeSta = []
                this.machCorpSta = []
                this.machWorkStateStat = []
                this.dateArr = []
                this.workTimes = []
                this.oilWear = []
                this.operatingRate = []
                this.workMachNum = []
                this.efficExp = []
                this.getInfolist()
                this.getRunList()
            }
        },
    },
    beforeDestroy() {},
    methods: {
        getInfolist() {
            let params = {
                deptId: this.deptId,
            }
            getMachInfoData_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.bindNum = res.data.bindNum
                        this.machTypeStat = []
                        this.machCorpStat = []
                        this.machWorkStateStat = []
                        for (let i in res.data.machTypeStat) {
                            this.machTypeCount += Number(res.data.machTypeStat[i].num)
                            let obj = {
                                name: res.data.machTypeStat[i].name,
                                value: res.data.machTypeStat[i].num,
                            }
                            this.machTypeStat.push(obj)
                        }
                        this.machTypeStat = bubbleSort(this.machTypeStat, "value")
                        for (let i in res.data.machCorpStat) {
                            this.machCorpStatCount += Number(res.data.machCorpStat[i].num)
                            let obj = {
                                name: res.data.machCorpStat[i].name,
                                subName: res.data.machCorpStat[i].name,
                                value: res.data.machCorpStat[i].num,
                            }
                            this.machCorpStat.push(obj)
                        }
                        this.machCorpStat = bubbleSort(this.machCorpStat, "value")
                        for (let i in res.data.machWorkStateStat) {
                            this.machWorkStateStatCount += Number(res.data.machWorkStateStat[i].num)
                            let obj = {
                                name: res.data.machWorkStateStat[i].name,
                                subName: res.data.machWorkStateStat[i].name,
                                value: res.data.machWorkStateStat[i].num,
                                itemStyle: {
                                    normal: {
                                        color: this.colors[i],
                                    },
                                },
                            }
                            this.machWorkStateStat.push(obj)
                        }
                        if (this.machTypeStat.length == 0) {
                            let obj = {
                                name: "暂无数据",
                                subName: "暂无数据",
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: this.colors[0],
                                    },
                                },
                            }
                            this.machTypeCount = 0
                            this.machTypeStat.push(obj)
                        }
                        if (this.machCorpStat.length == 0) {
                            let obj = {
                                name: "暂无数据",
                                subName: "暂无数据",
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: this.colors[0],
                                    },
                                },
                            }
                            this.machCorpStatCount = 0
                            this.machCorpStat.push(obj)
                        }
                        this.machTypeStatFn()
                        this.machCorpStatFn()
                        this.machWorkStateStatFn()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getRunList() {
            let params = {
                deptId: this.deptId,
            }
            getMachRunData_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.dateArr = []
                        this.workTimes = []
                        this.radarMapDTO = []
                        this.oilWear = []
                        this.operatingRate = []
                        this.workMachNum = []
                        this.efficExp = []
                        res.data.list.forEach((i) => {
                            i.date = this.initMD(i.date)
                            this.dateArr.push(i.date)
                            this.workTimes.push(i.workTimes)
                            this.operatingRateCount += Number(i.operatingRate)
                            this.workMachNumCount += Number(i.workMachNum)
                            this.efficExpCount += Number(i.efficExp)
                            this.operatingRate.push(i.operatingRate)
                            this.workMachNum.push(i.workMachNum)
                            this.oilWear.push(i.oilWear)
                            this.efficExp.push(i.efficExp)
                        })
                        for (let i in res.data.radarMapDTO) {
                            this.radarMapDTO.push(res.data.radarMapDTO[i])
                        }
                        this.maxcnt = Math.max(...this.radarMapDTO)
                        if (this.maxcnt == 0) {
                            this.maxcnt = 10
                        }

                        if (this.dateArr.length == 0) {
                            for (let i = 0; i < 7; i++) {
                                let date = this.initMD(new Date(new Date().getTime() - 86400))
                                this.dateArr.push(date)
                                this.workTimes.push(0)
                                this.operatingRate.push(0)
                                this.workMachNum.push(0)
                                this.oilWear.push(0)
                                this.efficExp.push(0)
                            }
                        }
                        this.workTimesFn()
                        this.radarMapDTOFn()
                        this.oilWearFn()
                        this.operatingRateFn()
                        this.workMachNumFn()
                        this.efficExpFn()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        machTypeStatFn() {
            let machTypeStat = this.$echarts.init(document.getElementById("machTypeStat"))
            this.machTypeStat.forEach((v, i) => {
                v["itemStyle"] = {
                    normal: {
                        color: this.colors[i],
                    },
                }
            })
            machTypeStat.setOption({
                tooltip: {
                    formatter: this.machTypeStatTipfn,
                    //触发类型：坐标轴触发
                    trigger: "item",
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                // title: {
                //     text: this.machTypeCount,
                //     left: "center",
                //     top: "40%",
                //     textStyle: {
                //         color: "#434242",
                //         fontSize: 24,
                //         align: "center",
                //     },
                // },
                // graphic: {
                //     type: "text",
                //     left: "center",
                //     top: "55%",
                //     style: {
                //         text: "总设备（台）",
                //         textAlign: "center",
                //         fill: "#333",
                //         fontSize: 12,
                //         fontWeight: 400,
                //     },
                // },
                series: [
                    {
                        name: "设备类型",
                        type: "pie",
                        radius: ["50%", "70%"],
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                        },
                        data: this.machTypeStat,
                    },
                ],
            })
        },
        machCorpStatFn() {
            let machCorpStat = this.$echarts.init(document.getElementById("machCorpStat"))
            this.machCorpStat.forEach((v, i) => {
                v["itemStyle"] = {
                    normal: {
                        color: this.colors[i],
                    },
                }
            })
            machCorpStat.setOption({
                tooltip: {
                    formatter: this.machCorpStatTipFn,
                    //触发类型：坐标轴触发
                    trigger: "item",
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                // title: {
                //     text: this.machCorpStatCount,
                //     left: "center",
                //     top: "40%",
                //     textStyle: {
                //         color: "#434242",
                //         fontSize: 24,
                //         align: "center",
                //     },
                // },

                // graphic: {
                //     type: "text",
                //     left: "center",
                //     top: "55%",
                //     style: {
                //         text: "总设备（台）",
                //         textAlign: "center",
                //         fill: "#333",
                //         fontSize: 12,
                //         fontWeight: 400,
                //     },
                // },
                series: [
                    {
                        name: "持有单位",
                        type: "pie",
                        radius: ["50%", "70%"],
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                        },
                        data: this.machCorpStat,
                    },
                ],
            })
        },
        machWorkStateStatFn() {
            let machTypeStat = this.$echarts.init(document.getElementById("machWorkStateStat"))
            machTypeStat.setOption({
                tooltip: {
                    formatter: this.machWorkStateStatTipFn,
                    //触发类型：坐标轴触发
                    trigger: "item",
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                // title: {
                //     text: this.bindNum,
                //     left: "center",
                //     top: "40%",
                //     textStyle: {
                //         color: "#434242",
                //         fontSize: 24,
                //         align: "center",
                //     },
                // },
                // graphic: {
                //     type: "text",
                //     left: "center",
                //     top: "55%",
                //     style: {
                //         text: "入网设备(台)",
                //         textAlign: "center",
                //         fill: "#333",
                //         fontSize: 12,
                //         fontWeight: 400,
                //     },
                // },
                series: [
                    {
                        name: "工作状态",
                        type: "pie",
                        radius: ["50%", "70%"],
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                        },
                        data: this.machWorkStateStat,
                    },
                ],
            })
        },
        workTimesFn() {
            let workTimes = this.$echarts.init(document.getElementById("workTimes"))
            workTimes.setOption({
                tooltip: {
                    //触发类型：坐标轴触发
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#5D90FF",
                        },
                    },
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "8%",
                    right: "10%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: "日期",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#BFBFBF",
                                type: "dashed",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: true,
                        data: this.dateArr,
                    },
                ],
                yAxis: [
                    {
                        name: "时长（h)",
                        offset: 8,
                        type: "value",
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "日均工作时长",
                        smooth: true, //true 为平滑曲线，false为直线
                        type: "line",
                        data: this.workTimes,
                        symbol: "none",
                        lineStyle: {
                            normal: {
                                width: 1,
                                color: "#5D90FF",
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0.5,
                                        color: "#5D90FF",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(139, 181, 254, 0.5)",
                                    },
                                ]),
                                opacity: 0.7,
                            },
                        },
                    },
                ],
            })
        },
        radarMapDTOFn() {
            let radarMapDTO = this.$echarts.init(document.getElementById("radarMapDTO"))
            radarMapDTO.setOption({
                title: {
                    text: "设备指数",
                    textStyle: {
                        color: "#fff",
                    },
                    top: 10,
                    left: 20,
                },
                tooltip: {
                    formatter: this.radarMapDTOTipFn,
                    //触发类型：坐标轴触发
                    trigger: "item",
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                legend: {
                    orient: "vertical",
                    x: "right",
                    y: "bottom",
                    // data: ["设备指数"]
                },
                radar: [
                    {
                        indicator: [
                            {
                                text: "效率指数：" + " " + this.radarMapDTO[0],
                                max: this.maxcnt,
                            },
                            {
                                text: "油耗指数：" + " " + this.radarMapDTO[1],
                                max: this.maxcnt,
                            },
                            {
                                text: "安全指数：" + " " + this.radarMapDTO[2],
                                max: this.maxcnt,
                            },
                            {
                                text: "稳定指数：" + " " + this.radarMapDTO[3],
                                max: this.maxcnt,
                            },
                            {
                                text: "强度指数：" + " " + this.radarMapDTO[4],
                                max: this.maxcnt,
                            },
                        ],
                        center: ["50%", "55%"],
                        radius: 80,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: "circle",
                        name: {
                            formatter: "{value}",
                            textStyle: {
                                color: "rgba(83, 84, 85, 1)",
                            },
                        },
                        splitArea: {
                            areaStyle: {
                                color: ["rgba(93,144,255,0.4900)", "rgba(93,144,255,0.4900)", "#D1E8FE", "rgba(71,111,222,0.6800)"],
                                shadowColor: "rgba(0, 0, 0, 0.2)",
                                shadowBlur: 10,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(211, 253, 250, 0.8)",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(211, 253, 250, 0.8)",
                            },
                        },
                    },
                ],
                calculable: true,
                series: [
                    {
                        name: "设备指数",
                        type: "radar",
                        color: "rgba(255, 228, 52, 1)",
                        tooltip: {
                            trigger: "item",
                        },
                        data: [
                            {
                                value: this.radarMapDTO,
                                areaStyle: {
                                    color: "rgba(255, 228, 52, 0.6)",
                                },
                            },
                        ],
                    },
                ],
            })
        },
        oilWearFn() {
            let oilWear = this.$echarts.init(document.getElementById("oilWear"))
            oilWear.setOption({
                tooltip: {
                    //触发类型：坐标轴触发
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#5D90FF",
                        },
                    },
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "8%",
                    right: "10%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: "日期",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#BFBFBF",
                                type: "dashed",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: true,
                        data: this.dateArr,
                    },
                ],
                yAxis: [
                    {
                        name: "耗油量（L)",
                        offset: 8,
                        type: "value",
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "日均油耗量",
                        smooth: true, //true 为平滑曲线，false为直线
                        type: "line",
                        areaStyle: {},
                        data: this.oilWear,
                        symbol: "none",
                        lineStyle: {
                            normal: {
                                width: 1,
                                color: "#5D90FF",
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0.5,
                                        color: "#5D90FF",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(139, 181, 254, 0.5)",
                                    },
                                ]),
                                opacity: 0.7,
                            },
                        },
                    },
                ],
            })
        },
        operatingRateFn() {
            let operatingRate = this.$echarts.init(document.getElementById("operatingRate"))
            operatingRate.setOption({
                tooltip: {
                    formatter: this.operatingRateTipFn,
                    //触发类型：坐标轴触发
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#5D90FF",
                        },
                    },
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "8%",
                    right: "10%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: "日期",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: true,
                        data: this.dateArr,
                    },
                ],
                yAxis: [
                    {
                        name: "开工率（%)",
                        offset: 8,
                        type: "value",
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            formatter: function (s) {
                                return s + "%"
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "日均开工率",
                        smooth: true, //true 为平滑曲线，false为直线
                        type: "line",
                        data: this.operatingRate,
                        itemStyle: {
                            normal: {
                                color: "#5D90FF",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    type: "solid",
                                },
                            },
                        },
                        // 线条样式
                        // areaStyle: {
                        //     normal: {
                        //         color: '#458DFE'
                        //     }
                        // }
                    },
                ],
            })
        },
        workMachNumFn() {
            let workMachNum = this.$echarts.init(document.getElementById("workMachNum"))
            workMachNum.setOption({
                tooltip: {
                    formatter: this.workMachNumTipFn,
                    //触发类型：坐标轴触发
                    trigger: "axis",
                    axisPointer: {
                        type: "",
                    },
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "8%",
                    right: "10%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: "日期",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: true,
                        data: this.dateArr,
                    },
                ],
                yAxis: [
                    {
                        name: "数量（台)",
                        offset: 8,
                        min: 0,
                        splitNumber: 5,
                        type: "value",
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "日工作设备数",
                        type: "bar",
                        data: this.workMachNum,
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(139, 181, 254, 1)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(222, 233, 255, 0.3700)",
                                        },
                                    ],
                                    globalCoord: false,
                                },
                            },
                        },
                    },
                    {
                        name: "",
                        type: "pictorialBar",
                        symbolSize: [15, 3],
                        symbolPosition: "end",
                        symbol: "reat",
                        z: 12,
                        color: "#5D90FF",
                        data: this.workMachNum,
                    },
                ],
            })
        },
        efficExpFn() {
            let efficExp = this.$echarts.init(document.getElementById("efficExp"))
            efficExp.setOption({
                tooltip: {
                    formatter: this.efficExpTipFn,
                    //触发类型：坐标轴触发
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#3FCF77",
                        },
                    },
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                    extraCssText: "box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);",
                },
                grid: {
                    left: "8%",
                    right: "10%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: "日期",
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                        boundaryGap: true,
                        data: this.dateArr,
                    },
                ],
                yAxis: [
                    {
                        name: "效率(%)",
                        offset: 8,
                        type: "value",
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#BFBFBF",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            formatter: function (s) {
                                return s + "%"
                            },
                        },
                        splitLine: {
                            //去除网格线
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#BFBFBF",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "平均效率",
                        smooth: true, //true 为平滑曲线，false为直线
                        type: "line",
                        data: this.efficExp,
                        itemStyle: {
                            normal: {
                                color: "#3FCF77",
                                lineStyle: {
                                    // 系列级个性化折线样式
                                    type: "solid",
                                },
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "#3FCF77",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(63,207,119,0)",
                                    },
                                ]),
                                opacity: 0.7,
                            },
                        },
                    },
                ],
            })
        },
        machTypeStatTipfn(date) {
            let nameStr = `
                ${date.seriesName}<br />
                ${date.data.name}:&nbsp;${date.data.value}&nbsp;(${
                date.data.value > 0 ? ((Number(date.data.value) / Number(this.machTypeCount)) * 100).toFixed(2) + "%" : "0%"
            })`
            return nameStr
        },
        machCorpStatTipFn(date) {
            let nameStr = `
                ${date.seriesName}<br />
                ${date.data.subName}:&nbsp;${date.data.value}&nbsp;(${
                date.data.value > 0 ? ((Number(date.data.value) / Number(this.machTypeCount)) * 100).toFixed(2) + "%" : "0%"
            })`
            return nameStr
        },
        machWorkStateStatTipFn(date) {
            let nameStr = `
                ${date.seriesName}<br />
                ${date.data.name}:&nbsp;${date.data.value}&nbsp;(${
                date.data.value > 0 ? ((Number(date.data.value) / Number(this.machWorkStateStatCount)) * 100).toFixed(2) + "%" : "0%"
            })`
            return nameStr
        },
        operatingRateTipFn(date) {
            let nameStr = ""
            nameStr = `
                    <div class="canvas">
                        <div class="item">${date[0].axisValue}</div>
                        <div class="item">
                            <span class="radius1 radius"></span>
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].value ? date[0].value + "%" : "0%"}</span>
                        </div>
                    </div>
                    `

            return nameStr
        },
        workMachNumTipFn(date) {
            let nameStr = ""
            nameStr = `
                    <div class="canvas">
                        <div class="item">${date[0].axisValue}</div>
                        <div class="item">
                            <span class="radius2 radius"></span>
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].value + "台"}</span>
                        </div>
                    </div>
                    `

            return nameStr
        },
        efficExpTipFn(date) {
            let nameStr = ""
            nameStr = `
                    <div class="canvas">
                        <div class="item">${date[0].axisValue}</div>
                        <div class="item">
                            <span class="radius3 radius"></span>
                            <span class="name">${date[0].seriesName}</span>
                            <span class="name">${date[0].value ? date[0].value + "%" : "0%"}</span>
                        </div>
                    </div>
                    `

            return nameStr
        },
        radarMapDTOTipFn(date) {
            let nameStr = ""
            nameStr = `
                    <div class="canvas" >
                        <div class="item" style="padding:0 5px;">${date.seriesName}</div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">效率指数：</span>
                            <span class="name">${date.value[0] > 0 ? date.value[0] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">油耗指数：</span>
                            <span class="name">${date.value[1] > 0 ? date.value[1] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">安全指数：</span>
                            <span class="name">${date.value[2] > 0 ? date.value[2] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">稳定指数：</span>
                            <span class="name">${date.value[3] > 0 ? date.value[3] : "0"}</span>
                        </div>
                        <div class="item" style="padding:0 10px;">
                            <span class="name">强度指数：</span>
                            <span class="name">${date.value[4] > 0 ? date.value[4] : "0"}</span>
                        </div>
                    </div>
                    `

            return nameStr
        },
        initMD(data) {
            let dataObj = new Date(data)
            let y = dataObj.getFullYear() < 10 ? "0" + dataObj.getFullYear() : dataObj.getFullYear()
            let m = dataObj.getMonth() + 1
            m = m < 10 ? "0" + m : m
            let d = dataObj.getDate()
            d = d < 10 ? "0" + d : d
            return m + "-" + d
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId
        this.getInfolist()
        this.getRunList()
    },
}
</script>
<style lang="less" scoped>
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    .box {
        height: 100%;
        width: 100%;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        .item {
            width: 33%;
            height: 32.5%;
            background: #fcfdff;
            margin-right: 0.5%;
            border-radius: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            .top {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-left: 20px;
                img {
                    height: 18px;
                }
                span {
                    font-size: 16px;
                    color: #333;
                    margin-left: 6px;
                }
                .num {
                    color: rgb(83, 108, 251);
                    font-size: 20px;
                }
            }
            .bottom {
                width: 90%;
                height: calc(100% - 50px);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    width: 55%;
                    height: 100%;
                    position: relative;

                    .number {
                        position: absolute;
                        top: 40%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 40px;
                        font-family: "Auto Digital-Bold, Auto Digital";
                        font-weight: bold;
                        color: #1891ff;
                    }
                    .name {
                        position: absolute;
                        bottom: 15px;
                        left: 0;
                        right: 0;
                        font-size: 16px;
                        line-height: 1.5;
                        text-align: center;
                    }
                }
                .right {
                    position: relative;
                    width: 45%;
                    height: 200px;
                    overflow: hidden;
                    &.moreRight {
                        position: relative;
                        &::before {
                            content: "";
                            position: absolute;
                            top: -30px;
                            left: 0;
                            right: 0;
                            height: 40px;
                            z-index: 99;
                            background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgba(255, 255, 255, 0.53) 82%, rgba(255, 255, 255, 0) 100%);
                        }
                        &::after {
                            content: "";
                            position: absolute;
                            bottom: -30px;
                            left: 0;
                            right: 0;
                            height: 40px;
                            z-index: 99;
                            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.77) 14%, #ffffff 43%, #ffffff 100%);
                        }
                    }

                    .list {
                        position: relative;
                        width: 100%;
                        height: auto;
                        list-style: none;
                        overflow-y: scroll;
                        margin-left: 10px;
                        &::-webkit-scrollbar {
                            width: 8px;
                        }
                        li {
                            width: 100%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            color: #181818;
                            margin-bottom: 10px;
                            .radius {
                                width: 20px;
                                height: 10px;
                                border-radius: 10px;
                                background: #98d87d;
                                margin-right: 10px;
                            }
                            .name {
                                margin-right: 10px;
                                width: 80px;
                                color: #181818;
                                .ivu-tooltip {
                                    width: 80px;
                                }
                            }
                            .sub {
                                margin-right: 10px;
                                width: 40px;
                                color: #58595a;
                                &:last-of-type {
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                }
                p {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 5px;
                    span {
                        font-size: 12px;
                    }
                    span:first-child {
                        height: 10px;
                        width: 20px;
                        border-radius: 5px;
                        margin-right: 2px;
                    }
                }
            }
            .chartBox {
                height: calc(100% - 50px);
                div {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        li:nth-child(3n) {
            margin-right: 0%;
        }
    }
}
/deep/ .canvas {
    .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .radius {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
            &.radius1 {
                background-color: #5d90ff;
            }
            &.radius2 {
                background-color: #5d90ff;
            }
            &.radius3 {
                background-color: #3fcf77;
            }
        }
        .name {
            margin-right: 5px;
            font-size: 10px;
        }
    }
}
</style>
